<template>
	<div class="page">
		<div class="wrap">
			<div class="header">
				<div class='title dis_f_c_c'>
					<div>直推用户数量：<span>{{list.length}}</span>人</div>
				</div>
				<div class="user_time dis_f_sa_c">
					<div class="left">用户名</div>
					<div class="right">分享时间</div>
				</div>
			</div>
			<div class="user_ul">
				<div class='user_li dis_f_sa_c' v-for="(item,index) in list" :key="index">
					<div class="left dis_f_l_c">
						<img class='avatar' :src='item.avatar'>
						<div class='name'>{{item.nick_name}}</div>
					</div>
					<div class="right">
						<div class='add_time'>{{item.create_time}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	
</script>
<style lang="scss" scoped>

	.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 888;
		background: #e1e1e1;
		border-bottom: 1px solid #e1e1e1;
	}

	.header .title {
		padding-top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100px;
		background: #fff;
		font-size: 32px;
		font-weight: bold;
		color: #343434;
		margin-bottom: 20px;
	}

	.title span {
		color: #E74737;
		font-size: 48px;
		font-weight: bold;
	}

	.user_time {
		height: 100px;
		background: #fff;
		font-size: 32upx;
		color: #343434;
		font-weight: bold;
	}

	.user_ul {
		padding-top: 220px;
	}

	.user_li {
		height: 90px;
		border-bottom: 1px solid #E1E1E1;
		background: #fff;
	}

	.user_li .left .avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-right: 24px;
	}

	.user_li .user_info .name {
		font-size: 28px;
		color: #343434;
		font-weight: bold;
	}

	.user_li .right {
		font-size: 28px;
		color: #343434;
	}
</style>
